<%@ page language="java" contentType="text/html;charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zh-cn" class="no-js">
<!--<![endif]-->
<head>
    <jsp:include page="/common/common.jsp"/>
    <script src="${path}/audit/layer/layer.js"></script>					
	<script src="${path}/audit/layer/extend/layer.ext.js"></script>
    <link rel="stylesheet" type="text/css" href="${path}/assets/plugins/select2/select2.css"/>
    <link rel="stylesheet" type="text/css" href="${path}/assets/plugins/select2/select2-metronic.css"/>
    <link href="${path}/audit/layer/skin/layer.css" rel="stylesheet">
	<link href="${path}/audit/layer/skin/layer.ext.css" rel="stylesheet">
<script>
var aaa = [];
var bbb = [];
var ccc = 0;
</script>
</head>
<body class="page-header-fixed">
<jsp:include page="/common/header.jsp"/>
<script src="${path}/assets/plugins/ueditor/third-party/highcharts/highcharts.js"></script>
<script src="${path}/assets/plugins/ueditor/third-party/highcharts/modules/exporting.js"></script>
<div class="clearfix">
</div>
<div class="page-container">
    <div class="page-sidebar-wrapper"><jsp:include page="/common/menu.jsp"/></div>
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="row">
                <div class="col-md-12">
                    <div class="portlet box purple">
                    
                        <div class="portlet-title">
                            <div class="caption">
                                <i class="fa fa-file-text-o"></i> URL统计 
                            </div>
                            <div class="tools">
                                <div class="actions">
                            <a href='javascript:window.open("${path}/urlRecord/downExcel?"+$("#formQuery").serialize())' class="btn blue">导出Excel</a>
                        		</div>
                        	</div>
                            
                        </div>
                        <div class="portlet-body">
                            <div id="container" style="min-width: 300px; height: 400px; "></div>
                            <!--  
                            <div>
                                <div id="pie1" style="min-width:33%;height:300px;float:left"></div>
                                <div id="pie2" style="min-width:33%;height:300px;float:left"></div>
                                <div id="pie3" style="min-width:33%;height:300px;float:left"></div>
                            </div> -->
                        </div>
                        <div class="portlet-body">
                            <form id="formQuery" class="form-horizontal" action="${path}/urlRecord/list">
                                <div class="form-body">
                                    
                                    <div class="form-group">
                                        <label class="col-md-1 control-label">域名</label>
                                        <div class="col-md-2">
                                            <input type="text" id="url_host" name="url_host" class="form-control"/>
                                        </div> 
                                         <label class="col-md-1 control-label">IP</label>
                                        <div class="col-md-2">
                                            <input type="text" id="user_ip" name="user_ip" class="form-control"/>
                                        </div>
                                             
                              </div>   
                                 <div class="form-group">
                                 	<label class="col-md-1 control-label">发布时间</label>
                                        <div class="col-md-4">
                                            <div class="input-group input-large date-picker input-daterange"
                                                 data-date-format="yyyy-mm-dd">
                                                <input type="text" class="form-control" id="fromDate" name="fromDate" value="${fromDate}"
                                                       readonly="readonly" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"/>
                                                <span class="input-group-addon">to</span>
                                                <input type="text" class="form-control" id="toDate" name="toDate" value="${toDate}"
                                                       readonly="readonly" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"/>
                                            </div>
                                        </div> 
                                        <div class="col-md-1">
                                            <button type="button" class="btn green" onclick="geturlRecordList()">查询</button>      <!-- e 查询直接调用getNewsList() 在本末的script中-->
                                        </div>
                                          <!--  
										<div class="col-md-1">
												<div class="actions">
													<a  onclick="getlist();" ><i
														class="fa fa-plus">每日top20分析图形 </i></a>
												</div>
											</div>
										</div> -->
                                </div>
                            </form>
                            <table class="table table-striped table-bordered table-hover" id="urlRecordList"></table>   
                        </div>
                    	
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="/common/footer.jsp"/>
<script type="text/javascript" src="${path}/assets/plugins/calendar/WdatePicker.js"></script>
<script type="text/javascript" src="${path}/assets/plugins/district/linkagesel-min.js"></script>
<script type="text/javascript" src="${path}/audit/urlRecord/js/urlRecord.js"></script>    
<script type="text/javascript" src="${path}/audit/urlRecord/js/json2.js"></script>       
<script type="text/javascript" >
    var msg = '${msg}';
    $(function () {
    	
        if(msg){
        	App.bubble(200, msg);      
        }
        geturlRecordList(); 
        $('#pid').change(function() {
            changeSecondType(this.value);
        });
    });
    function changeSecondType(pid) {
        $.ajax({
            url: _path + '/conf/queryConfTByPid?pid='+pid,
            type: 'GET',
            success: function(resp) {
                $("#columnId").html('');
                new LinkageSel({
                    dataReader: {id: 'id', name: 'value0'},
                    data: resp.dataList,
                    selStyle: 'margin-left: 3px;',
                    select:  '#columnId'
                });
            }
        });
    }
    
    
</script>
</body>
</html>
<script type="text/javascript">
function getlist(){
    var url_b=$("#fromDate").val();
    var url_e=$("#toDate").val();
    var url_host=$("#url_host").val();
    var user_ip=$("#user_ip").val();
    if(url_b=="" && url_e!=""){
    	$("#toDate").val("");
    	layer.alert("发布时间同为空或者都不为空,目前显示为当天数据！", {skin: 'layui-layer-molv',offset: '30%'});
    }
    if(url_b!="" && url_e==""){
    	$("#fromDate").val("");
    	layer.alert("发布时间同为空或者都不为空,目前显示为当天数据！", {skin: 'layui-layer-molv',offset: '30%'});
    }
   // alert(url_b+"abc");
    	$.ajax({										//name为 字符串类型，columnid为Long类型
    	    url: _path + "/urlRecord/analysis?url_b="+url_b+"&url_e="+url_e+"&url_host="+url_host+"&user_ip="+user_ip,
    	    type: "POST",
    	    dataType: "json",
    	    async: false,
    	    success: function(jsonMap) {
    	    	var list = jsonMap.dataList;
    	        if(list.length>0){
    	        	for(var i=0;i<list.length;i++){
    	        		aaa[i]=list[i].url_host;
    	        		bbb[i]=list[i].aa;
    	        	}
    	        } 
    	        else
    	        {
    	        	aaa.length = 0;
    	        	bbb.length = 0;
    	        	//aaa = [];
    	        	//bbb = [];
    	        }
    	    }
    	});
    	draw_url();
	}
	function draw_url () {
    //	alert(aaa[5]);
    	$(function () {
    	    $('#container').highcharts({
    	        chart: {
    	            type: 'column'
    	        },
    	        title: {
    	            text: 'url_top20'
    	        },
    	        xAxis: {
    	        	categories:aaa,
    	            labels: {
    	                rotation: -45,
    	                align: 'right',
    	                style: {
    	                    fontSize: '13px'
    	                }
    	            }
    	        },
    	        yAxis: {
    	            min: 0,
    	            title: {
    	                text: ''
    	            }
    	        },
    	        tooltip: {
    	            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    	            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
    	                    '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
    	            footerFormat: '</table>',
    	            shared: true,
    	            useHTML: true
    	        },
    	        plotOptions: {
    	            column: {
    	                pointPadding: 0.2,
    	                borderWidth: 0
    	            }
    	        },
    	        series: [
    	            {
    	                name: '单位(%)',
//    	                 data: [70, 100, 140, 60, 50, 30, 150, 310, 60, 30, 20, 30, 150, 70, 30, 60, 30, 50 , 50 , 40],
    	               data:bbb,
    						dataLabels: {// 显示值
    	                    enabled: true,
    	                    color: '#ff9933',
    	                    style: {
    	                        fontWeight: 'bold'
    	                    },
    	                    formatter: function () {
    	                        return this.y + '%';
    	                    }
    	                }
    	            }
    	        ],
    	        colors: [
    	            '#ffcc00'
    	        ]
    	    });
			/*	
    	    // 客户来源分布
    	    $('#pie1').highcharts({
    	        chart: {
    	            plotBackgroundColor: null,
    	            plotBorderWidth: null,
    	            plotShadow: false
    	        },
    	        title: {
    	            text: '客户来源分布'
    	        },
    	        tooltip: {
    	            pointFormat: ' <b>{point.percentage:.1f}%</b>'
    	        },
    	        plotOptions: {
    	            pie: {
    	                allowPointSelect: true,
    	                cursor: 'pointer',
    	                dataLabels: {
    	                    enabled: true,
    	                    color: '#000000',
    	                    connectorColor: '#000000',
    	                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
    	                },
    	                showInLegend: true
    	            }
    	        },
    	        series: [
    	            {
    	                type: 'pie',
    	                data: [
    	                    ['公司提供', 45.0],
    	                    ['转介绍', 26.8],
    	                    {
    	                        name: '自行开发',
    	                        y: 12.8,
    	                        sliced: true,
    	                        selected: true
    	                    }
    	                ]
    	            }
    	        ],
    	        colors: [
    	            '#ffff00',
    	            '#ff00ff',
    	            '#6600ff'
    	        ]
    	    });

    	    // 性别比例
    	    $('#pie2').highcharts({
    	        chart2: {
    	            plotBackgroundColor: null,
    	            plotBorderWidth: null,
    	            plotShadow: false
    	        },
    	        title: {
    	            text: '性别比例'
    	        },
    	        tooltip: {
    	            pointFormat: ' <b>{point.percentage:.1f}%</b>'
    	        },
    	        plotOptions: {
    	            pie: {
    	                allowPointSelect: true,
    	                cursor: 'pointer',
    	                dataLabels: {
    	                    enabled: true,
    	                    color: '#000000',
    	                    connectorColor: '#000000',
    	                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
    	                },
    	                showInLegend: true
    	            }
    	        },
    	        series: [
    	            {
    	                type: 'pie',
    	                data: [
    	                    ['男', 26.8],
    	                    {
    	                        name: '女',
    	                        y: 12.8,
    	                        sliced: true,
    	                        selected: true
    	                    }
    	                ]
    	            }
    	        ],
    	        colors: [
    	            '#6600ff',
    	            '#ff00ff'
    	        ]
    	    });

    	    // 年龄（单位：岁）
    	    $('#pie3').highcharts({
    	        chart: {
    	            plotBackgroundColor: null,
    	            plotBorderWidth: null,
    	            plotShadow: false
    	        },
    	        title: {
    	            text: '年龄（单位：岁）'
    	        },
    	        tooltip: {
    	            pointFormat: ' <b>{point.percentage:.1f}%</b>'
    	        },
    	        plotOptions: {
    	            pie: {
    	                allowPointSelect: true,
    	                cursor: 'pointer',
    	                dataLabels: {
    	                    enabled: true,
    	                    color: '#000000',
    	                    connectorColor: '#000000',
    	                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
    	                },
    	                showInLegend: true
    	            }
    	        },
    	        series: [
    	            {
    	                type: 'pie',
    	                data: [
    	                    ['13 - 29', 45.0],
    	                    {
    	                        name: '30 - 39',
    	                        y: 12.8,
    	                        sliced: true,
    	                        selected: true
    	                    },
    	                    ['>= 50', 26.8],
    	                    ['40 - 49', 26.8]
    	                ]
    	            }
    	        ]
    	    }); 
				*/
    	});
    }
</script>